<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        title="发帖"
        left-text="取消"
        right-text="发表"
        @click-left="$router.go(-1)"
        @click-right="onClickRight"
      />
    </header>
    <div class="content">
      <div class="send-msg-box">
        <textarea class="send-msg-txt" type="text" v-show="txtIsEmpty" placeholder="请输入内容..." />
        <div>
          <!-- 图片集合 -->
          <van-uploader  v-model="fileList" :after-read="afterRead" preview-size="0.98rem" :max-count="9" multiple/>
        </div>
      </div>
      <div class="topic">
        <span>{{ topicV }}</span>
        <p @click="$router.push({ name: 'topic' })">
          <i class="sel-label">选择合适的话题会有更多赞~</i>
          <van-icon name="arrow" slot="right" color="rgba(28, 28, 28, .5)"/>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Icon, Uploader, Toast } from 'vant'
import Bus from '@/utils/bus.js'
import { mapActions, mapState } from 'vuex'

Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Uploader)
Vue.use(Toast)

export default {
  computed: {
    ...mapState({
      post_image_list: ({ sendPost }) => sendPost.post_image_list
    })
  },
  data () {
    return {
      topicV: '#参与话题',
      txtIsEmpty: true,
      fileList: [
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],
      uploadImgList: []
    }
  },
  methods: {
    ...mapActions('sendPost', ['uploadImg']),
    afterRead (file) {
      // 判断为多文件还是单文件
      this.uploadImgList.length = 0
      this.fileList.map(file => {
        this.uploadImgList.push({
          img: window.URL.createObjectURL(file.file),
          brandTag: '',
          diyTag: '',
          siteTag: '',
          brandTagLocation: 'left: 1.97rem; top: 0.9rem;',
          diyTagLocation: 'left: 2rem; top: 2.6rem;',
          siteTagLocation: 'left: 1.65rem; top: 1.8rem;'
        })
      })
      this.$store.dispatch('sendPost/uploadImg', { imgList: this.uploadImgList })
      this.$router.push({ name: 'preview' })
    },
    onClickRight () {
      // console.log('发表')
      // console.log(this.post_image_list)
      // console.log(this.fileList)
      this.$router.go(-1)
    }
  },
  mounted () {
    Bus.$on('addTopic', function (data) {
      this.topicV = data
    }.bind(this))
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/community/sendpost.scss';
</style>
